<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>用户管理</title>
    <link href="style/bootstrap.css" rel="stylesheet">
    <link href="style/gsdk.css" rel="stylesheet">
    <link href="style/demo.css" rel="stylesheet">
    <link href="style/cooriku.css" rel="stylesheet">
    <link href="style/font-awesome.css" rel="stylesheet">
    <link rel="shortcut icon" href="icon.ico" type="image/x-icon">
    <style>
        /* 保留原有的样式 */
        #userTable {
            width: 100%;
            border-collapse: collapse;
        }
        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 24px;
            color: #aaa;
        }
        #userTable th, #userTable td {
            padding: 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }

        #userTable thead th {
            background-color: #f2f2f2;
            font-weight: bold;
        }

        #userTable tr:hover {
            background-color: #f5f5f5;
        }

        .editButton, .modifyButton {
            margin-right: 5px;
            padding: 5px 10px;
            cursor: pointer;
            border: none;
            border-radius: 3px;
        }

        .editButton {
            background-color: #4CAF50; /* Green */
            color: white;
        }

        .modifyButton {
            background-color: #FF9800; /* Orange */
            color: white;
        }

        /* Hover effect for buttons */
        .editButton:hover, .modifyButton:hover {
            opacity: 0.8;
        }
        dialog {
            border: 3px solid #4CAF50;
            padding: 30px; /* 增加内边距 */
            max-width: 90%; /* 增加最大宽度 */
            width: 80%; /* 设置宽度 */
            box-shadow: 0 0 10px rgba(0,0,0,0.15);
            background-color: white;
            color: black;
            position: relative;
            border-radius: 5px;
            overflow: hidden;
        }
        dialog h1 {
            margin-top: 0;
            font-size: 24px;
            color: #333;
        }
        dialog form {
            display: flex;
            flex-direction: column;
        }
        dialog label {
            margin-bottom: 5px;
            font-weight: bold;
        }
        dialog input[type="text"],
        dialog input[type="datetime-local"] {
            padding: 8px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 100%; /* 使输入框占满宽度 */
            box-sizing: border-box; /* 包括内边距和边框在内的总宽度等于设置的宽度 */
        }
        dialog button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            align-self: flex-end; /* 将按钮右对齐 */
        }
        dialog button:hover {
            background-color: #45a049;
        }
        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 24px;
            color: #aaa;
        }
        .close-button:hover {
            color: #555;
        }
    </style>
</head>
<body>
<table id="userTable">
    <thead>
    <tr>
        <th>用户Id</th>
        <th>用户名</th>
        <th>姓名</th>
        <th>电话</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="user : ${userList}">
        <td th:text="${user.id}"></td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.telephone}"></td>
        <td th:text="${user.sex}"></td>
        <td>
            <button class="editButton">编辑</button>
            <button class="modifyButton" th:onclick="'if (confirm(\'确定要删除吗？\')) { window.location.href=\'' + @{/deleteUser} + '?user_id=' + ${user.id} + '\'; }'">删除</button>
        </td>
    </tr>
    </tbody>
</table>
<dialog id="myDialog">
    <h1>编辑用户信息</h1>
    <form id="editForm" th:action="@{/upUserdata}" method="POST">
        <label for="id">用户Id:</label>
        <input type="text" id="id" name="id" required>
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>
        <label for="telephone">电话:</label>
        <input type="text" id="telephone" name="telephone" required>
        <label for="password">重置密码:</label>
        <input type="text" id="password" name="password" required>
        <label for="sex">性别:</label>
        <input type="text" id="sex" name="sex" required>
        <button type="submit" class="btn btn-lg btn-fill btn-coo-pink btn-tooltip">保存更改</button>
    </form>
    <span class="close-button" onclick="document.getElementById('myDialog').close()">×</span>
</dialog>
<!-- 添加隐藏的 div 来存储消息 -->
<div id="message" th:text="${message}" style="display:none;"></div>

<script type="text/javascript">
    document.querySelectorAll('.editButton').forEach(button => {
        button.addEventListener('click', function() {
            document.getElementById('myDialog').showModal();
        });
    });
    document.querySelectorAll('.editButton').forEach(button => {
    button.addEventListener('click', function() {
        const row = this.closest('tr');
        document.getElementById('id').value = row.cells[0].textContent;
        document.getElementById('username').value = row.cells[1].textContent;
        document.getElementById('name').value = row.cells[2].textContent;
        document.getElementById('telephone').value = row.cells[3].textContent;
        document.getElementById('sex').value = row.cells[4].textContent;
        document.getElementById('myDialog').showModal();
    });
});
    // 添加新的脚本来显示消息
    window.onload = function() {
        var messageElement = document.getElementById('message');
        var messageText = messageElement.textContent.trim();

        if (messageText) {
            alert(messageText);
        }
    };
</script>
</body>
</html>
